<!DOCTYPE html>
<html>
<body onload="onPageLoad()">
Regression test for <a href="http://crbug.com/436214">http://crbug.com/436214</a>. This tests updating SVG &lt;rect&gt; elements having various stroke styles. If this test passes, you will see "PASS" below.
<p id="result">WAITING - click within each of the rectangular areas for results</p>
<svg id="svg" width="820" height="500" version="1.1">
    <rect fill="none" stroke="black" x="0.5" y="0.5" width="819" height="499"/>



    <rect pointer-events="none" stroke-width="10px" stroke="#aaa" stroke-opacity="0.2" fill="none" x="360" y="80" width="40" height="40"/>
    <rect pointer-events="none" stroke-width="20px" stroke="#f0a000" stroke-dasharray="30, 10" stroke-opacity="0.2" fill="none" x="60" y="60" width="200" height="50"/>
    <rect pointer-events="none" stroke-width="40px" stroke="#d000d0" stroke-linejoin="bevel" stroke-opacity="0.2" fill="none" x="80" y="350" width="140" height="100"/>
    <rect pointer-events="none" stroke-width="20px" stroke="#d00000" stroke-opacity="0.2" fill="none" x="400" y="340" width="80" height="140"/>
    <rect pointer-events="none" stroke-width="20px" stroke="#f39" stroke-opacity="0.2" stroke-miterlimit="0" fill="none" x="130" y="180" width="130" height="50"/>

    <rect id="rect0" cursor="move" stroke-width="10px" stroke="#aaa" stroke-linecap="square" fill="none" x="360" y="80" width="40" height="40"/>
    <rect id="rect1" cursor="move" stroke-width="20px" stroke="#f0a000" stroke-dasharray="30, 10" fill="none" x="60" y="60" width="200" height="50"/>
    <rect id="rect2" cursor="move" stroke-width="40px" stroke="#d000d0" stroke-linejoin="bevel" fill="none" x="80" y="350" width="140" height="100"/>
    <rect id="rect3" cursor="move" stroke-width="20px" stroke="#d00000" stroke-linecap="round" fill="none" x="400" y="340" width="80" height="140"/>
    <rect id="rect4" cursor="move" stroke-width="20px" stroke="#f39" stroke-miterlimit="0" fill="none" x="130" y="180" width="130" height="50"/>



    <rect pointer-events="none" stroke-width="20px" stroke="#0c0" stroke-opacity="0.2" fill="none" x="545" y="70" width="160" height="60"/>
    <rect pointer-events="none" stroke-width="20px" stroke="#090" stroke-opacity="0.2" fill="none" x="545" y="170" width="160" height="60"/>
    <rect pointer-events="none" stroke-width="20px" stroke="#060" stroke-opacity="0.2" fill="none" x="545" y="270" width="160" height="60"/>
    <rect pointer-events="none" stroke-width="20px" stroke="#030" stroke-opacity="0.2" fill="none" x="545" y="370" width="160" height="60"/>

    <rect id="rect10" cursor="move" stroke-width="20px" stroke="#0c0" fill="none" x="545" y="70" width="160" height="60"/>
    <rect id="rect11" cursor="move" stroke-width="20px" stroke="#090" fill="none" x="545" y="170" width="160" height="60"/>
    <rect id="rect12" cursor="move" stroke-width="20px" stroke="#060" fill="none" x="545" y="270" width="160" height="60"/>
    <rect id="rect13" cursor="move" stroke-width="20px" stroke="#030" fill="none" x="545" y="370" width="160" height="60"/>
</svg>
<script type="text/javascript">
if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.waitUntilDone();
}

var result = document.getElementById("result"),
    svg = document.getElementById("svg"),
    rect0 = document.getElementById("rect0"),
    rect1 = document.getElementById("rect1"),
    rect2 = document.getElementById("rect2"),
    rect3 = document.getElementById("rect3"),
    rect4 = document.getElementById("rect4"),
    rect10 = document.getElementById("rect10"),
    rect11 = document.getElementById("rect11"),
    rect12 = document.getElementById("rect12"),
    rect13 = document.getElementById("rect13");
function onPageLoad() {
    var activeAreas = [{
        rect: rect0,
        click: function () {
            this.rect.setAttribute("width", "100");
            this.rect.setAttribute("height", "100");
        }
    }, {
        rect: rect1,
        click: function () {
            this.rect.setAttribute("x", "100");
        }
    }, {
        rect: rect2,
        click: function () {
            this.rect.setAttribute("y", "300");
        }
    }, {
        rect: rect3,
        click: function () {
            this.rect.setAttribute("x", "350");
            this.rect.setAttribute("y", "270");
        }
    }, {
        rect: rect4,
        click: function () {
            this.rect.setAttribute("width", "170");
            this.rect.setAttribute("height", "80");
        }
    }, {
        rect: rect10,
        click: function () {
            this.rect.setAttribute("stroke-dasharray", "30, 10");
        }
    }, {
        rect: rect11,
        click: function () {
            this.rect.setAttribute("stroke-miterlimit", "0");
        }
    }, {
        rect: rect12,
        click: function () {
            this.rect.setAttribute("stroke-linejoin", "bevel");
        }
    }, {
        rect: rect13,
        click: function () {
            this.rect.setAttribute("x", "575");
            this.rect.setAttribute("y", "400");
            this.rect.setAttribute("stroke-linecap", "square");
        }
    }];

    for (var i = 0; i < activeAreas.length; ++i) {
        var aa = activeAreas[i];
        aa.x1 = +aa.rect.getAttribute("x");
        aa.y1 = +aa.rect.getAttribute("y");
        aa.x2 = aa.x1 + (+aa.rect.getAttribute("width"));
        aa.y2 = aa.y1 + (+aa.rect.getAttribute("height"));
    }

    var bcr = svg.getBoundingClientRect(),
        x0 = bcr.left << 0,
        y0 = bcr.top << 0;

    requestAnimationFrame(function () {
        document.addEventListener("mousedown", function onMouseDown(event) {
            var x = event.clientX - x0,
                y = event.clientY - y0;
            for (var i = 0; i < activeAreas.length; ++i) {
                var aa = activeAreas[i];
                if (aa.x1 <= x && x <= aa.x2
                    && aa.y1 <= y && y <= aa.y2) {
                    aa.click();
                    activeAreas.splice(i, 1);
                    break;
                }
            }

            if (activeAreas.length == 0) {
                document.removeEventListener("mousedown", onMouseDown, false);

                result.textContent = "Running tests...";

                var tests = [
                    { x: 400, y: 118, expectedElem: svg },
                    { x: 460, y: 180, expectedElem: rect0 },

                    { x: 263, y: 83, expectedElem: svg },
                    { x: 200, y: 62, expectedElem: rect1 },

                    { x: 235, y: 112, expectedElem: svg },
                    { x: 160, y: 350, expectedElem: svg },
                    { x: 233, y: 413, expectedElem: svg },
                    { x: 160, y: 300, expectedElem: rect2 },

                    { x: 400, y: 350, expectedElem: svg },
                    { x: 350, y: 370, expectedElem: rect3 },

                    { x: 200, y: 230, expectedElem: svg },
                    { x: 267, y: 236, expectedElem: svg },
                    { x: 304, y: 218, expectedElem: rect4 },
                    { x: 307, y: 266, expectedElem: svg },

                    { x: 707, y: 65, expectedElem: svg },
                    { x: 710, y: 130, expectedElem: rect10 },

                    { x: 712, y: 164, expectedElem: svg },
                    { x: 712, y: 216, expectedElem: rect11 },

                    { x: 712, y: 264, expectedElem: svg },
                    { x: 712, y: 316, expectedElem: rect12 },

                    { x: 610, y: 425, expectedElem: svg },
                    { x: 739, y: 394, expectedElem: rect13 }
                ];

                for (var i = 0; i < tests.length; ++i) {
                    var test = tests[i],
                        elem = document.elementFromPoint(x0 + test.x, y0 + test.y),
                        success;
                    if (elem !== test.expectedElem) {
                        success = false;
                        result.textContent = "FAIL - unexpected element at (" + test.x + ", " + test.y + ")";
                    } else {
                        success = true;
                    }

                    // Draw a dot and a label at the test point (helps with identification).
                    var dot = document.createElementNS("http://www.w3.org/2000/svg", "circle");
                    dot.setAttribute("pointer-events", "none");
                    dot.setAttribute("cx", test.x);
                    dot.setAttribute("cy", test.y);
                    dot.setAttribute("r", "2");
                    if (!success) dot.setAttribute("fill", "red");
                    svg.appendChild(dot);
                    var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
                    label.setAttribute("pointer-events", "none");
                    label.setAttribute("x", test.x + 4);
                    label.setAttribute("y", test.y);
                    label.textContent = "(" + test.x + ", " + test.y + ")";
                    if (!success) label.setAttribute("fill", "red");
                    svg.appendChild(label);
                }

                if (result.textContent == "Running tests...")
                    result.textContent = "PASS";

                if (window.testRunner)
                    testRunner.notifyDone();
            }
        }, false);

        if (window.eventSender) {
            // The bug would only occur if the shape attributes were modified
            // within a mouse event handler when the mouse cursor was within
            // the shape.
            activeAreas.slice(0).map(function (aa, i, activeAreas) {
                eventSender.mouseMoveTo((x0 + aa.x1 + (aa.x2 - aa.x1) / 2) << 0, (y0 + aa.y1 + (aa.y2 - aa.y1) / 2) << 0);
                eventSender.mouseDown();
                eventSender.mouseUp();
            });
        }
    });
}
</script>
</body>
</html>
